<template>
	<view class="container">
		
		<com-head textTit="协议管理" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<view class="groupList">
			<view class="list" @click="agreementFun(0)">
				<view class="left">
					<text class="t1 iconfont"></text>
					<text class="title">注册协议</text>
				</view>
				<view class="right">
					<text class="iconfont icon-a-arrowbeifen3"></text>
				</view>
			</view>
			<view class="list" @click="agreementFun(1)">
				<view class="left">
					<text class="t1 iconfont"></text>
					<text class="title">隐私协议</text>
				</view>
				<view class="right">
					<text class="iconfont icon-a-arrowbeifen3"></text>
				</view>
			</view>
		</view>
		
		<!-- 公共头筛选组件 -->
		<u-popup v-model="show" safe-area-inset-bottom mode="center" height="80%" border-radius="40" @close="close" closeable>
			<view class="specification">
				<rich-text :nodes="nodes"/>
			</view>
		</u-popup>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				agreementObj: {},
				scrollTop: 0,
				show: false,
				nodes: ''
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		onLoad() {
			this.agreement()
		},
		methods: {
			agreementFun(type) {
				if (type) {
					this.nodes = this.agreementObj.privacy_agreement
				} else {
					this.nodes = this.agreementObj.user_agreement
				}
				
				this.show = true
			},
			close() {
				this.show = false
			},
			async agreement(){
				let {data,code} = await this.$u.api.agreement();
				if(code){
					this.agreementObj = data
				}
			},
		}
	}
</script>

<style lang="scss" scoped >
.container{
	padding: 50rpx 30rpx;
	.groupList {
		width: 686rpx;
		background: #ffffff;
		border-radius: 8rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		margin-bottom: 92rpx;
		margin-top: 20rpx;

		.list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 96rpx;
			border-bottom: 1rpx solid rgba(142, 142, 142, .24);

			.left {
				display: flex;
				align-items: center;

				.t1 {
					color: #50DCC2;
					font-size: 38rpx;
					margin-right: 26rpx;
				}

				.title {
					color: #333333;
					font-size: 26rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;

				.num {
					display: block;
					width: 34rpx;
					height: 34rpx;
					background: #007664;
					border-radius: 50%;
					margin-right: 18rpx;
					color: #FFFFFF;
					font-size: 24rpx;
					text-align: center;
				}

				.icon-a-arrowbeifen3 {
					font-size: 32rpx;
					color: #000000;
				}
			}
		}

		.list:last-child {
			border: none;
		}
	}

}
.disabled{
	color: #999 !important;
}
.specification{
	width: 680rpx;
	// height: 1200rpx;
	// overflow-y: scroll;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	padding: 40rpx;
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
